<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>申诉记录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/dayjs/1.7.8/dayjs.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>
<link href="https://cdn.bootcss.com/viewerjs/1.3.3/viewer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/viewerjs/1.3.3/viewer.min.js"></script>
<script src="/js/common/common.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.account-change {
	background-color: #fff;
	margin-bottom: 1rem;
	display: flex;
	padding-left: 1.2rem;
	padding-right: 0.2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.account-change-body {
	flex: 4;
	display: flex;
	flex-direction: column;
}

.account-change-body-item label {
	text-align: end;
	width: 5rem;
	margin-right: 0.5rem;
}

.account-change-body-item span {
	min-width: 5rem;
	display: inline-block;
}

.account-change-body-item button {
	width: 96%;
}

.account-change-body-item-highlight {
	color: #c3606a;
}

.page-link {
	color: #007bff !important
}

.actual-pay-amount {
	text-align: center;
	color: red;
	font-weight: bold;
}

.sreenshot {
	background-color: #fff;
	border: 0.1rem solid #dee2e6;
	width: 50%;
	height: 10rem;
	float: left !important;
}

.no-supplied-sreenshot {
	text-align: center;
	height: 10rem;
	line-height: 10rem;
	color: red;
	font-weight: bold;
}

.immediately-upload-action {
	text-align: center;
	height: 10rem;
	line-height: 10rem;
	color: #007bff;
	font-weight: bold;
	font-size: 4rem;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="appeal-record" v-cloak>
		<div class="page-body" style="background: #f2f2f2;" v-show="showAppealRecordFlag">
			<div class="input-group" style="padding-top: 0.3rem;">
				<input type="text" class="form-control" style="width: 8rem;" v-model="orderNo" placeholder="订单号"> <select class="form-control" style="height: 3rem;" v-model="gatheringChannelCode">
					<option value="">收款渠道</option>
					<option v-for="dictItem in gatheringChannelDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select>
			</div>
			<div class="input-group">
				<select class="form-control" style="height: 3rem;" v-model="appealType">
					<option value="">申诉类型</option>
					<option v-for="dictItem in appealTypeDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select>
			</div>
			<div class="input-group" style="padding-bottom: 0.3rem;">
				<select class="form-control" style="width: 2.2rem; height: 3rem;" v-model="appealState">
					<option value="">状态</option>
					<option v-for="dictItem in appealStateDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select><input type="date" class="form-control" style="width: 8rem;" v-model="initiationTime">
				<div class="input-group-append">
					<button class="btn btn-outline-secondary" type="button" v-on:click="query">查询</button>
				</div>
			</div>
			<div class="account-change" v-for="appealRecord in appealRecords">
				<div class="account-change-body">
					<div class="account-change-body-item">
						<label>订单号:</label> <span>{{appealRecord.orderNo}}</span><label class="account-change-body-item-highlight">{{appealRecord.stateName}}</label>
					</div>
					<div class="account-change-body-item">
						<label>发起时间:</label> <span>{{appealRecord.initiationTime}}</span>
					</div>
					<div class="account-change-body-item">
						<label>收款渠道:</label> <span>{{appealRecord.gatheringChannelName}}</span><label>收款金额:</label> <span>{{appealRecord.gatheringAmount}}元</span>
					</div>
					<div class="account-change-body-item">
						<label>申诉类型:</label> <span>{{appealRecord.appealTypeName}}</span>
					</div>
					<div class="account-change-body-item">
						<label class="account-change-body-item-highlight">{{appealRecord.initiatorObj == 'user' ? '用户发起' : '商户发起'}}</label>
						<template v-if="appealRecord.state == '2'"> <label>处理方式:</label> <span class="account-change-body-item-highlight">{{appealRecord.processWayName}}</span></template>
					</div>
					<div class="account-change-body-item" style="padding-bottom: 0.5rem;">
						<button class="btn btn-outline-danger btn-lg" type="button" v-show="(appealRecord.state == '1' && appealRecord.initiatorObj == 'merchant' && appealRecord.appealType != '3' && (appealRecord.userSreenshotIds == null || appealRecord.userSreenshotIds.length == 0))" v-on:click="showViewDetailsPage(appealRecord.id)">提供截图</button>
						<button class="btn btn-outline-info btn-lg" type="button" v-show="!(appealRecord.state == '1' && appealRecord.initiatorObj == 'merchant' && appealRecord.appealType != '3' && (appealRecord.userSreenshotIds == null || appealRecord.userSreenshotIds.length == 0))" v-on:click="showViewDetailsPage(appealRecord.id)">查看详情</button>
					</div>
				</div>
			</div>
			<div style="padding-left: 13rem;">
				<ul class="pagination">
					<li class="page-item"><a class="page-link" v-show="totalPage > 0 && pageNum > 1" v-on:click="prePage">上一页</a></li>
					<li class="page-item"><a class="page-link" v-show="pageNum >= 1 && pageNum < totalPage" v-on:click="nextPage">下一页</a></li>
				</ul>
			</div>
		</div>
		<div class="page-body" style="background: #f2f2f2;" v-show="showViewDetailsFlag">
			<div class="account-change">
				<div class="account-change-body">
					<div class="account-change-body-item">
						<label>订单号:</label> <span>{{selectedAppealRecord.orderNo}}</span><label class="account-change-body-item-highlight">{{selectedAppealRecord.stateName}}</label>
					</div>
					<div class="account-change-body-item">
						<label>发起时间:</label> <span>{{selectedAppealRecord.initiationTime}}</span>
					</div>
					<div class="account-change-body-item">
						<label>收款渠道:</label> <span>{{selectedAppealRecord.gatheringChannelName}}</span><label>收款金额:</label> <span>{{selectedAppealRecord.gatheringAmount}}元</span>
					</div>
					<div class="account-change-body-item">
						<label>申诉类型:</label> <span>{{selectedAppealRecord.appealTypeName}}</span>
					</div>
					<div class="account-change-body-item">
						<label class="account-change-body-item-highlight">{{selectedAppealRecord.initiatorObj == 'user' ? '用户发起' : '商户发起'}}</label>
						<template v-if="selectedAppealRecord.state == '2'"> <label>处理方式:</label> <span class="account-change-body-item-highlight">{{selectedAppealRecord.processWayName}}</span></template>
					</div>
				</div>
			</div>
			<div class="actual-pay-amount" v-show="selectedAppealRecord.appealType == '2' && selectedAppealRecord.state == '1'">
				<label>{{selectedAppealRecord.initiatorObj == 'user' ? '用户反映实际支付金额:' : '商户反映实际支付金额:'}}</label> <span>{{selectedAppealRecord.actualPayAmount}}元</span>
			</div>
			<div v-show="selectedAppealRecord.appealType == '1'">
				<div class="card">
					<div class="card-header">
						<span>商户的截图</span>
					</div>
					<div class="card-body">
						<div class="no-supplied-sreenshot" v-show="selectedAppealRecord.merchantSreenshotIds == null || selectedAppealRecord.merchantSreenshotIds.length == 0">未提供截图</div>
						<img class="sreenshot" v-for="sreenshotId in selectedAppealRecord.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
					</div>
				</div>
			</div>
			<div v-show="selectedAppealRecord.appealType == '2'">
				<div class="card">
					<div class="card-header">
						<span>我的截图</span>
					</div>
					<div class="card-body">
						<div class="immediately-upload-action" v-show="selectedAppealRecord.state == '1' && (selectedAppealRecord.userSreenshotIds == null || selectedAppealRecord.userSreenshotIds.length == 0)" v-on:click="showUploadSreenshotPage">立即上传</div>
						<div class="no-supplied-sreenshot" v-show="selectedAppealRecord.state == '2' && (selectedAppealRecord.userSreenshotIds == null || selectedAppealRecord.userSreenshotIds.length == 0)">未提供截图</div>
						<img class="sreenshot" v-for="sreenshotId in selectedAppealRecord.userSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
					</div>
				</div>
				<div class="card">
					<div class="card-header">
						<span>商户的截图</span>
					</div>
					<div class="card-body">
						<div class="no-supplied-sreenshot" v-show="selectedAppealRecord.merchantSreenshotIds == null || selectedAppealRecord.merchantSreenshotIds.length == 0">未提供截图</div>
						<img class="sreenshot" v-for="sreenshotId in selectedAppealRecord.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
					</div>
				</div>
			</div>
			<div v-show="selectedAppealRecord.appealType == '3'">
				<div class="card">
					<div class="card-header">
						<span>商户的截图</span>
					</div>
					<div class="card-body">
						<div class="no-supplied-sreenshot" v-show="selectedAppealRecord.merchantSreenshotIds == null || selectedAppealRecord.merchantSreenshotIds.length == 0">未提供截图</div>
						<img class="sreenshot" v-for="sreenshotId in selectedAppealRecord.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
					</div>
				</div>
			</div>
			<div class="container" style="margin-top: 1.3rem; margin-bottom: 1.3rem;">
				<button type="button" class="btn btn-danger btn-lg btn-block" v-show="selectedAppealRecord.state == '1' && selectedAppealRecord.initiatorObj == 'user' && (selectedAppealRecord.merchantSreenshotIds == null || selectedAppealRecord.merchantSreenshotIds.length == 0)" v-on:click="userCancelAppeal(selectedAppealRecord.id)">撤销申诉</button>
				<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="showAppealRecordPage">返回</button>
			</div>
		</div>
		<div class="page-body" style="background: #f2f2f2;" v-show="showUploadSreenshotFlag">
			<div class="container" style="margin-top: 1.3rem;">
				<form>
					<div class="form-group">
						<input type="file" class="form-control upload-sreenshot" multiple>
					</div>
					<button type="button" class="btn btn-danger btn-lg btn-block" v-on:click="uploadSreenshot">上传</button>
					<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="showViewDetailsPage(selectedAppealRecord.id)">返回</button>
				</form>
			</div>
		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript" src="/js/appeal-record.js"></script>
</body>
</html>